/**
 * 数据代理
 * 实现 vm.xxx -> vm._data.xxx
 */

/***
 * 使用Object.defineProperty劫持数据【缺点】：
 * 1、无法检测到对象属性的新增或删除 ，需要使用 set 等其他方法。
 * 2、不能监听数组的变化 ，局限于数组的push/pop/shift/unshift/splice/sort/reverse七个方法
 */
function Vue(options) {
    this.$options = options || {}
    const data = this._data = (typeof this.$options.data) === "function" ? this.$options.data() : {}
    const me = this
    Object.keys(data).forEach(key => {
        Object.defineProperty(this, key, {
            set: function (val) {
                document.querySelector(".container").innerHTML = val
                me._data[key] = val
            },
            get: function () {
                return me._data[key]
            }
        })
    })
}

const vm = new Vue({
    el: "#app",
    data() {
        return {
            name: "小费",
            age: 23,
            year: 2021,
            arr: []
        }
    }
})
console.log(vm)
vm.name = "小马"
console.log("新增属性前：", vm)
vm.school = "二道区小学"
vm.arr = ["二道区小学", "实验小学", "三中"]
vm.arr.push("小河沟")
console.log("新增属性后：", vm)